<template>
  <div
    class="todu-container hover"
    :class="{ open: open === true }"
    :style="{ 'background-color': bgcolor }"
    @click="open = true"
    ref="editor"
  >
    <div class="todu-header">
      <el-checkbox
        size="large"
        :disabled="!select"
        v-model="checked"
        @change="dataChange = true"
      ></el-checkbox>
      <div class="color-block"></div>
      <div class="priority-color-block"></div>
      <el-input class="title" placeholder="添加待办" v-model="title" @change="dataChange = true"></el-input>
    </div>
    <QuillEditor
      :options="options"
      theme="snow"
      v-if="open"
      v-model:content="content"
      @textChange="dataChange = true"
    />
  </div>
</template>
<script setup>
import { ref, defineProps, computed, watch } from "vue";
import { QuillEditor } from '@vueup/vue-quill'
import { onClickOutside } from '@vueuse/core'
import '@vueup/vue-quill/dist/vue-quill.bubble.css'
import '@vueup/vue-quill/dist/vue-quill.snow.css'
import { useStore } from "vuex";
import dayjs from "dayjs"

const store = useStore();

const currentDay = computed(() => dayjs(store.state.day.currentDay))

const props = defineProps({
  select: { type: Boolean, default: true },
  bgcolor: String,
  contentData: { type: Object, default: {} },
  isAddCom: { type: Boolean, default: false }
});

const title = ref(props.contentData.title ?? '');
const content = ref(props.contentData.content ?? '');
const checked = ref(props.contentData.done ?? false);
const dataChange = ref(false);


const options = ref({
  debug: 'info',
  modules: {
    toolbar: ['bold', 'italic', 'underline']
  },
  placeholder: '添加内容...',
  readOnly: false,
})
const open = ref(false);

const editor = ref();

onClickOutside(editor, () => {
  open.value = false;
})

watch(open, (newX) => {
  if (newX === false && dataChange.value === true) {
    dataChange.value = false;
    insertTodo()
  }

})

function insertTodo() {
  let til = title.value
  let con = content.value
  let time = Date.now()
  if (props.isAddCom) {
    let id = props.contentData.id ?? Math.floor(Math.random() * (Date.now()))
    store.dispatch('todo/AddTodo',
      { id: id, title: til, content: con, time: time, create: time, date: currentDay.value.valueOf(), done: checked.value }
    )
    title.value = ""
    content.value = ""
  }
  else {
    store.dispatch('todo/SetTodo',
      { id: props.contentData.id, title: til, content: con, time: time, done: checked.value }
    )
  }

}

</script>

<script>
export default {
  name: "todo"
}
</script>

<style lang="scss" scoped>
.todu-header {
  padding: 13px;
  display: flex;
  align-items: center;

  .color-block {
    background-color: var(--el-color-primary);
    width: 6px;
    height: 24px;
    box-sizing: border-box;
    margin-left: 13px;
  }
  .priority-color-block {
    box-sizing: border-box;
    height: 18px;
    width: 18px;
    background-color: var(--el-color-primary);
    border-radius: 50%;
    border: solid 2px;
    margin-left: 13px;
  }
  .title {
    --el-input-bg-color: transparent;
    --el-input-border-color: transparent;
    --el-border-color-hover: transparent;
    --el-input-focus-border-color: transparent;
  }
  :deep(input[type="text"], select, textarea) {
    background-color: transparent;
  }
}

.todu-container {
  background-color: rgba(229, 229, 229, 0.3);
  border-radius: 4px;
  margin-bottom: 3px;

  :deep(.ql-editor) {
    padding: 0 15px 12px;
  }
  :deep(.ql-tooltip) {
    z-index: 5;
  }
  :deep(.ql-snow) {
    border: 0px solid;
  }
  :deep(.el-checkbox) {
    --el-index-normal: 0;
  }
}

.hover:hover {
  background-color: var(--hover-color);
}

.open {
  background-color: var(--hover-color);
}
</style>